<template>
  <view class="chat-history">
    <view class="head">
      <view class="area" @click="show = true">
        <p>{{ selected }}</p>
        <u-icon name="arrow-down" size="14"></u-icon>
      </view>
      <view class="search">
        <input
          type="text"
          v-model.trim="query.keyWord"
          placeholder="请输入关键字搜索"
          @confirm="confirmInput"
        />
      </view>
      <!-- <view class="btn" @click="getList">搜索</view> -->
    </view>
    <view class="content">
      <view v-if="list.length > 0">
        <scroll-view
          scroll-y
          class="scroll-view"
          :scroll-into-view="intoView"
          @scroll="onScroll"
          @scrolltoupper="handleScrollToUpper"
        >
          <div class="loading_more" v-if="loadingShow">
            <u-loading-icon
              mode="circle"
              text="加载中..."
              timing-function="linear"
            ></u-loading-icon>
          </div>
          <view class="list">
            <view :id="`item${index}`" class="item" v-for="(item, index) in list" :key="item">
              <view class="ico">
                <img :src="item.avatar ? item.avatar : '/static/mr_tx.png'" alt="" />
              </view>
              <view class="info">
                <view class="text">
                  <text 
                    :selectable="true"
                    :user-select="true"
                  >
                    {{ item.message }}
                  </text>
                </view>
                <view class="time">{{ $Date(item.createDate, "YYYY-MM-DD HH:mm") }}</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="no-data" v-else>
        <img src="/static/no-data.png" alt="" />
        <view>暂无数据</view>
      </view>
    </view>

    <c-city-picker :show="show" @close="close" @confirm="confirm" />
  </view>
</template>

<script>
import { mapState } from "vuex"
import api from "@/api"
export default {
  data() {
    return {
      show: false,
      selected: "全国",
      scrollViewHeight: "",
      query: {
        keyWord: "",
        pageNo: 1,
        pageSize: 20,
        sendGroupUserId: 1,
      },
      total: 0,
      list: [],
      intoView: "",
      isFx: false,
      loadingShow: false,
      scrollTop: 0
    }
  },
  computed: {
    // ...mapState({
    //   userName: (state) => state.user.userName,
    // }),
  },
  methods: {
    confirmInput() {
      this.query.pageNo = 1
      this.getList(true)
    },
    getList(state) {
      if (!this.query.keyWord) {
        this.$toast("请输入关键字搜索")
        return
      }
      this.intoView = ""
      // this.$showLoading('加载中...')
      api.chat.group({...this.query}).then((res) => {
        if (res.code == 200) {
          // setTimeout(() => {
          uni.hideLoading()
          if (state) {
            this.list = []
          }
          if (this.query.pageNo && !res.data.list.length) {
            // this.$toast('没有更多信息~')
            return
          }
          this.list = res.data.list.concat(this.list);
          const lastItemId = 'item' + (res.data.list.length + 1);
          this.$nextTick(() => {
            if (state) {
              this.intoView = `item${this.list.length - 1}`
            } else {
              this.intoView = lastItemId
            }
          })
          // },500);
        } else {
          uni.hideLoading()
        }
      })

      setTimeout(() => {
        this.loadingShow = false
      }, 500)
    },
    close() {
      this.show = false
    },
    confirm(item) {
      this.close()
      this.selected = item.name
      this.query.sendGroupUserId = item.id
      this.query.pageNo = 1
      this.getList(true)
    },
    handleScrollToUpper() {
      if (this.scrollTop < 1000) {
        console.log("滚动到顶部了")
        this.loadingShow = true
        this.isFx = false

        this.query.pageNo++
        this.getList(false)
      }
    },
    onScroll(event) {
      const deltaY = event.detail.deltaY
      this.scrollTop = event.detail.scrollTop
      // if (deltaY > 0) {
      //   this.isFx = true
      // } else {
      //   this.isFx = false
      // }

    },
  },
}
</script>

<style lang="scss" scoped>
.chat-history {
  height: 100vh;
  overflow: hidden;

  .head {
    position: fixed;
    left: 0;
    right: 0;
    padding: 30rpx;
    display: flex;
    align-items: center;
    z-index: 99;
    background: #fff;
    //阴影
    box-shadow: 0 0 20rpx rgba(131, 130, 130, 0.1);

    .area {
      display: flex;
      align-items: center;
      font-size: 30rpx;
      margin-right: 40rpx;
      p {
        margin-right: 16rpx;
      }
    }

    .search {
      flex: 1;
      height: 70rpx;
      border-radius: 30rpx;
      background: #f7f7f7;
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      font-size: 30rpx;
    }

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 120rpx;
      height: 60rpx;
      border-radius: 40rpx;
      background: #00b26a;
      color: #fff;
      margin-left: 20rpx;
    }
  }

  .content {
    box-sizing: border-box;
    padding: 160rpx 30rpx 50rpx;
    .scroll-view {
      height: calc(100vh - 210rpx);
    }
    .list {
      .item {
        display: flex;
        margin-bottom: 50rpx;

        .ico {
          width: 100rpx;
          height: 100rpx;
          background: #ccc;
          border-radius: 10rpx;
          margin-right: 20rpx;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }

        .info {
          flex: 1;
          .text {
            background: #f1f1f1;
            margin: 0 0 0 18rpx;
            font-size: 30rpx;
            color: #333;
            padding: 24rpx;
            border-radius: 0 20rpx 20rpx 20rpx;
            word-wrap: break-word;
            overflow-wrap: break-word;
            display: inline-block;
          }
          .time {
            color: #666666;
            font-size: 26rpx;
            margin: 0 0 6rpx 18rpx;
          }
        }
      }
    }

    .no-data {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 50rpx 0;
      font-size: 24rpx;
      color: #999999;
      img {
        width: 320rpx;
        height: 320rpx;
      }
    }
  }
  .loading_more {
    margin: 30rpx 0;
  }
}
</style>
